<template>
  <div class="app-container">
    <!--操作按钮-->
    <div style="padding-bottom: 30px;" class="operation_container">
      <ul>
        <li><el-button size="mini" @click="handleCancel">返回</el-button></li>
        <li><el-button size="mini" type="primary" @click="handleSubmit">保存</el-button></li>
      </ul>
    </div>
    <el-form ref="form" :model="data" :rules="rules" :inline="true" label-width="125px" size="mini">
      <!--折叠面板-->
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="basicInfo">
          <template slot="title">
            <span>基本信息</span>
            <i class="header-icon el-icon-info" />
          </template>
          <el-row :gutter="24" class="form-item-group">
            <el-col :span="6">
              <el-form-item size="mini" label="费率类型：">
                <el-select v-model="data.saleBuyType" filterable clearable>
                  <el-option v-for="item in selects.saleBuyTypeList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item size="mini" label="选择合同：">
                <el-select v-model="data.contractNo" filterable clearable>
                  <el-option v-for="item in selects.contractList" :key="item.id" :label="item.contractName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item size="mini" label="运单类型：">
                <el-select v-model="data.surviceType" filterable clearable>
                  <el-option v-for="item in selects.freightOrderTypeList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item size="mini" label="路线类型：">
                <el-select v-model="data.routeDistanceType" filterable clearable>
                  <el-option v-for="item in selects.routeDistanceTypeList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="data.saleBuyType === 'sale'" :span="6">
              <el-form-item label="托运人：" prop="customerName">
                <el-input v-model="data.custNm" class="filter-item">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="openCustomerSelector" />
                </el-input>
                <customer-selector :visible.sync="customerSelectorVisible" @selected="handleCustomerSelected" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.saleBuyType === 'buy'" :span="6">
              <el-form-item size="mini" label="承运人：" prop="carrierName">
                <el-input v-model="data.carrierNm" class="filter-item">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="openCarrierSelector" />
                </el-input>
              </el-form-item>
              <carrier-selector :visible.sync="carrierSelectorVisible" @selected="handleCarrierSelected" />
            </el-col>
            <el-col v-if="data.saleBuyType === 'buy'" :span="6">
              <el-form-item label="是否多司机：">
                <el-input v-model="data.teamYn" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.surviceType === 'FTL'" :span="6">
              <el-form-item label="集装箱尺寸：">
                <el-input v-model="data.cntrSize" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.surviceType === 'FTL'" :span="6">
              <el-form-item label="集装箱类型：">
                <el-input v-model="data.cntrType" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.surviceType === 'LTL'" :span="6">
              <el-form-item size="mini" label="结费类型：">
                <el-select v-model="data.chargeAdjustType" filterable clearable>
                  <el-option v-for="item in selects.chargeAdjustTypeList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="data.routeDistanceType === 'mile'" :span="6">
              <el-form-item label="出发地：">
                <el-cascader
                  v-model="data.dptrAreaCdIdList"
                  :options="selects.locationList"
                  :props="{ expandTrigger: 'hover', label: 'locationName', value: 'id' }"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="data.routeDistanceType === 'mile'" :span="6">
              <el-form-item label="到货地：">
                <el-cascader
                  v-model="data.arrAreaCdIdList"
                  :options="selects.locationList"
                  :props="{ expandTrigger: 'hover', label: 'locationName', value: 'id' }"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="data.routeDistanceType === 'zone'" :span="6">
              <el-form-item label="区域：">
                <el-input v-model="data.zoneCdNm" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.chargeAdjustType === 'weight'" :span="6">
              <el-form-item label="重量区间起：">
                <el-input v-model="data.wtFr" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.chargeAdjustType === 'weight'" :span="6">
              <el-form-item label="重量区间至：">
                <el-input v-model="data.wtTo" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.chargeAdjustType === 'weight'" :span="6">
              <el-form-item label="重量单位：">
                <el-input v-model="data.wtUnitName" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="危险品类型：">
                <el-input v-model="data.dangerType" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最低价：">
                <el-input v-model="data.minAmt" type="number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最高价：">
                <el-input v-model="data.maxAmt" type="number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="金额：">
                <el-input v-model="data.basicAmt" type="number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="加急费：">
                <el-input v-model="data.driverHotDeliverRate" type="number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="到门费：">
                <el-input v-model="data.doortodoorFee" type="number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="现金折扣：">
                <el-input v-model="data.paycashDiscountRate" type="number" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConstant from '@/constant/AppConstant'
import TreeUtils from '@/utils/TreeUtils'
import LocationApi from '@/api/basic/LocationApi'
//import ContractApi from '@/api/basic/ContractApi'
import RoutePriceNewApi from '@/api/basic/RoutePriceNewApi'
import CustomerSelector from '@/views/basic/customer/CustomerSelector'
import CarrierSelector from '@/views/basic/carrier/CarrierSelector'

export default {
  directives: {
    waves
  },
  components: {
    CustomerSelector,
    CarrierSelector
  },
  data() {
    return {
      activeNames: [
        'basicInfo',
        'otherInfo'],
      selects: {
        ynTypeList: appConstant.ynTypeList,
        saleBuyTypeList: appConstant.saleBuyTypeList,
        freightOrderTypeList: appConstant.freightOrderTypeList,
        routeDistanceTypeList: appConstant.routeDistanceTypeList,
        chargeAdjustTypeList: appConstant.chargeAdjustTypeList,
        locationList: [],
        contractList: []
      },
      operation: undefined,
      data: {
        isValid: appConstant.Y,
        dptrAreaCdIdList: [],
        arrAreaCdIdList: []
      },
      // 校验规则的名称必须和校验字段的名称一致
      rules: {
        saleBuyType: [{ required: true, message: '_', trigger: 'blur' }]
      },
      customerSelectorVisible: false,
      carrierSelectorVisible: false
    }
  },
  created() {
    this.initForm()
    this.loadSelects()
  },
  methods: {
    initForm() {
      const id = this.$route.params.id
      if (id) {
        this.operation = 'edit'
        RoutePriceNewApi.get(id).then(response => {
          this.data = response.data
          // 将字符串转为数组
          if (this.data.dptrAreaCd) {
            this.data.dptrAreaCdIdList = this.data.dptrAreaCd.split(',')
          }
          if (this.data.arrAreaCd) {
            this.data.arrAreaCdIdList = this.data.arrAreaCd.split(',')
          }
        })
      } else {
        this.operation = 'add'
      }
    },
    loadSelects() {
      LocationApi.list().then(response => {
        this.selects.locationList = TreeUtils.list2Tree(response.data)
      })
      ContractApi.list().then(response => {
        this.selects.contractList = response.data;
      })

    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 将数组转为字符串
          if (this.data.dptrAreaCdIdList) {
            this.data.dptrAreaCd = this.data.dptrAreaCdIdList.join(',')
          }
          if (this.data.arrAreaCdIdList) {
            this.data.arrAreaCd = this.data.arrAreaCdIdList.join(',')
          }
          if (this.operation === 'add') {
            RoutePriceNewApi.add(this.data).then(response => {
              this.$message.success('新增成功！')
              this.$router.go(-1)
            })
          } else if (this.operation === 'edit') {
            RoutePriceNewApi.edit(this.data).then(response => {
              this.$message.success('编辑成功！')
              this.$router.go(-1)
            })
          }
        }
      })
    },
    handleCancel() {
      this.$router.go(-1)
    },
    handleChange(val) {
      console.log(val)
    },
    openCustomerSelector() {
      this.customerSelectorVisible = true
    },
    handleCustomerSelected(obj) {
      this.data.custCd = obj.id
      this.data.custNm = obj.customerName
    },
    openCarrierSelector() {
      this.carrierSelectorVisible = true
    },
    handleCarrierSelected(obj) {
      this.data.carrierCd = obj.id
      this.data.carrierNm = obj.carrierName
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
